vue 中使用three.js
1.使用vue-cli工具创建一个vue项目vue create projectName2.安装three.jsnpm install three -S3.创建index.vue页面在该页面中导入THREE： import * as THREE from 'three'<template> <div class="app-wrap" ref="view"> </div></template><script>import * as THREE from 'three'import { OrbitC...
2024-01-10
Three.js 光照模型
教程第一节课就提到了光照模型，只是没有展开讲解，下面的内容先总结一下不同光照模型的构造函数、方法、属性和基类。光照对象、方法和属性下面的代码设置的是点光源和环境光源/*** 光源设置*///点光源var point=new THREE.PointLight(0xffffff);point.position.set(400,200,300);//点光源位置scene.add(point);//点...
2024-01-10
Three.js 加载三维模型
直接使用three.js编程建模比较麻烦，实际开发的时候往往会借助一些可视化的3D建模工具，比如SolidWorks、Blender、C4D、3Dmax。不同领域的三维软件支持导出的文件有所差异，比如工业设计、机械设计类的三维软件往往支持导入静态的3D模型，游戏开发常常使用的Blender等三维软件，除了静态的三维模型，还...
2024-01-10
Three.js 实现虫洞特效
虫洞效果在线预览，在学习之前可以先看一遍具体的视觉效果，有一个感性的认识。基本思路创建一个管道几何体，然后相机沿着轨迹线移动，注意相机的方向要沿着轨迹线的切线方向，这样会形成一个管道漫游的效果，如果渲染管道的时候使用点 Points 就可以展现一个虫洞特效。轨迹线创建通过 3D...
2024-01-10
Three.js 正投影和透视投影
针对不同应用的三维场景需要使用不同的投影方式，比如机械、工业设计领域常常采用正投影（平行投影），游戏场景往往采用透视投影（中心投影）。为了完成三维场景不同的投影方式，three.js封装WebGL API和相关算法，提供了OrthographicCamera、PerspectiveCamera等相机对象。正投影与透视投影生活中的物...
2024-01-10
three.js 将图片马赛克化的示例代码
这篇郭先生来说说BufferGeometry，类型化数组和粒子系统的使用，并且让图片有马赛克效果（同理可以让不清晰的图片清晰化），如图所示1. 解析图片解析图片和上一篇一样initCanvas() { canvas = document.createElement('canvas'); content = canvas.getContext('2d'); canvas.width = 1600; canvas.height = 1200; img = new Image(); img...
2024-01-10JS库之Three.js 简易入门教程(详解之一)
开场白webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。博主目前也在学习three.js，发现相关资料非常稀少，甚至官方的api文档也非常粗糙，很多效果需要自己慢慢敲代码摸索。所...
2024-01-10
Three.js 物体模型朝向某个对象
在 Threejs 中可以通过模型对象的 .lookAt() 方法控制表示某个物体的模型始终朝向某个模型或者说位置。比如 cylinderMesh 模型表示一个摄像机对象，sphereMesh 表示一个在三维场景中移动的模型对象，当模型对象 sphereMesh 移动到新的位置，通过表示相机的模型 cylinderMesh 可以通过 .lookAt() 方法控制镜头始终朝...
2024-01-10
three.js创建图片添加属性报错?
circle可以打印出一个对象，但是我添加position 不行，还会报以下错误function initContent() { circle = createMesh(new THREE.CircleGeometry(circleR, 32)); circle.position.y += 15; scene.add(circle...
2024-02-08three.js中3D视野的缩放实现代码
通过Threejs基础学习——修改版知道创建一个相机的相关知识点var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大纵横比：aspect (3d物体的宽/高比例)相机离视体积最近的距离：near相机离视体...
2024-01-10
为什么three.js地图在部署后不显示？
vue项目打包部署之后本地json为什么访问不到？使用three.js画了个中国地图，本人小白也是看大佬源码改的代码。 // 加载地图数据 loadMapData(str) { // https://datav.aliyun.com/portal/school/atlas/area_selector this.resetInitMap() const l...
2024-02-07Three.js开发实现3D地图的实践过程总结
前言本文主要介绍Three.js的开发基础和基本原理，以及如何实现3D全景图。想在web端实现3D全景图的效果，除了全景图片、WebGL外，还需要处理很多细节。据我所知，目前国外3D全景图比较好的是KrPano，国内很多3D全景服务是在使用krpano的工具。前段时间连续上了一个月班，加班加点完成了一个3D攻坚项...
2024-01-10
使用 Three.js 制作一百万个字母的动画
我在本文中的目标是以平滑的帧速率在屏幕上绘制一百万个动画字母。 使用现代 GPU 应该可以完成这项任务。 每个字母由两个带纹理的三角形组成，所以我们只讨论每帧 200 万个三角形。如果您来自传统的 JavaScript 动画背景，那么这一切听起来很疯狂。 每帧更新 200 万个三角形绝对不是你今天想用 JavaS...
2024-01-10
Three.js 选择三维模型对象（射线拾取）
在canvas画布上使用鼠标单击选中一个三维模型对象，三维模型然后做出反应，比如弹出一个窗口、颜色发生变化。要实现这一点首先把鼠标单机位置的屏幕坐标转化为标准设备坐标，然后要借助 Vector3 对象的方法 unproject 把标准设备坐标转化为世界坐标。然后利用鼠标单击位置对应的屏幕坐标转化得到...
2024-01-10
three.js 三维模型整个场景数据如何存储到数据库
使用场景：一个场景中可以动态加载10多个模型（或者更多），模型摆放到场景里，每个模型位置，大小，缩放都可以修改，修改完成后，保存整个场景。保存好的多个场景，可以根据场景id 来预览目前存储整个场景的数据到MongoDB数据库里面，但是场景下的glb模型特别大，把所有的数据存储进入，导...
2024-01-10Three.js WebGLRenderTarget 对象
WebGL 渲染目标对象 WebGLRenderTarget 实现了 WebGL 的离屏渲染功能，如果你有一定的 WebGL 或 OpenGL 基础，对帧缓冲区、离线渲染、后处理等概念应该是不陌生的。.render() 方法WebGL 渲染器 WebGLRenderer 渲染方法 .render() 的参数 ( Scene, Camera, WebGLRenderTarget, forceClear )。Scene：要渲染的场景对象Camera：场景对象对应...
2024-01-10利用three.js画一个3D立体的正方体示例代码
简介three.js 是一款WebGL框架，WebGL可以让我们在canvas上实现3D效果。实现3D效果在国内来说还算是比较新的东西，可供查阅的资料也不多。这篇文章仅是一个入门篇，介绍如何绘制一个3D正方体。Three.js中的基本概念Three.js包含3个基本概念：场景（Scene）、相机（Camera）和渲染器（Renderer）。场景就是需...
2024-01-10
three.js 利用uv和ThreeBSP制作一个快递柜功能
最近有three网友，问我要不要学习blender，其实我感觉学习一下也无妨，不过花大量时间精通，尚可不必，术业有专攻给别人留一条路吧，哈哈。那我我们就是用ThreeBSP和uv贴图的知识来制作一个定制化的快递柜，先上图，在线案例请点击博客原文。下面我们来讲解一下这样一个柜子的制作。1. 主角是...
2024-01-10Three.js 着色器 纹理贴图映射和彩色图转灰度图
Three.js 网格材质都有一个 map 属性，该属性用来设置网格模型的颜色贴图,渲染器系统会调用网格材质对应的着色器代码解析 map 属性的值进行渲染。本节课通过自定义着色器的纹理贴图代码来展示网格材质 map 属性对应的着色器原理。顶点纹理坐标数据 uv通过 Three.js 的球体、矩形平面、立方体等特定几...
2024-01-10将three.js背景更改为透明或HTML中的另一种颜色
如果要在three.js中使用透明背景，则需要在下面给出的代码中将alpha参数传递给WebGLRenderer构造函数-var renderer = new THREE.WebGLRenderer( {alpha: true } );//您可以将透明颜色保留为默认值。renderer.setClearColor( 0x000000, 0 ); //default但是，要设置背景色，renderer.setClearColor(0xb0f442 );...
2024-01-10Three.js - 为什么这些项目的影子看起来像这样？
我正在学习three.js。Three.js - 为什么这些项目的影子看起来像这样？我举一个例子来练习，但项目的阴影看起来不对或陌生。应该是这样的（这个形象是一个老教程）：和代码是这样的：<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/thr...
2024-01-10three.js欧拉角和四元数的使用方法
前言这篇郭先生就来说说欧拉角和四元数，欧拉角和四元数的优缺点是老生常谈的话题了，使用条件我就不多说了，我只说一下使用方法。1. 欧拉角（Euler）欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法1. set( x: number, y: number, z: ...
2024-01-10Vue.js中如何实现filters的复用？
例:文字超长后的(ellipsis)省略号, 金额后的(unit)货币单位, 百分比数字后的(percent)百分号?求解:vue.js 2有什么复用方案可用?回答：可以挂载到全局 Vue.filter | API — Vue.js。用法如下：Vue.filter('NumberFormat', function (value) { if (!value) { return '0'...
2024-03-07Three.js - 使用不需要光源的材料加载模型
我目前使用Three.js，版本71。我首先使用搅拌器创建我的模型，然后将它们导出为JSON文件。然后我用THREE.JSONLoader使用加载模型到我的场景如下：Three.js - 使用不需要光源的材料加载模型this.jsonLoader.load(pathToModelFile, function(geometry, materials) { //... }); 的材料列表仅包含THREE.MeshPhongMaterial索引0这种物质...
2024-01-10three.js加载obj模型的实例代码
three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。好了，下面通过一段代码给大家介绍three.js加载obj模型，具体代码如下所示：<!DOCTYPE html><html> <head> <script type="text/javascript" src="libs/three.js"></script> <script type="text/ja...
2024-01-10
微信小游戏中three.js离屏画布的示例代码
国庆8天长假，重庆之行因故未成，偶得闲，用three.js结合cannon.js写个3D小游戏耍耍。在微信小游戏中，把three.js的3D内容在离屏画布处理，然后复制到在屏画布，方法是：let c_toolbarHeight=140; let sysInfo=wx.getSystemInfoSync();require('./js/libs/weapp-adapter.js');var canvas_webGL=window.canvas;canvas_webGL.width = sysInfo.scre...
2024-01-10
关于three.js线上展馆
我想写一个类似于这个线上展馆一样的页面：我目前实现了房间场景的搭建：四面是围墙，中间也是几面墙很粗燥，大牛们别介意，现在的问题是，怎么让图画出现自动出现在紧贴墙壁的位置？？我自己所能掌握的知识就是一个一个的确定每一个画框的三维位置，把所有三维位置写成一个数组，再通过...
2024-01-10
three.js着色器材质的内置变量示例详解
什么是着色器？固定渲染管线： ——标准的几何&光照(T&L)管线，功能是固定的，它控制着世界、视、投影变换及固定光照控制和纹理混合。T&L管线可以被渲染状态控制，矩阵，光照和采制参数。如果有了固定渲染管线，编写程序就比较容易了，因为所有的变换都是由固定渲染管线来完成的，但是缺点...
2024-01-10
vue中使用raphael.js实现地图绘制
一、效果图二、在vue中引入raphael.jsnpm i raphael -S三、封装一个名为StreetMap的组件，代码如下 1 <template> 2 <div> 3 <div id='streetMap'> 4 <div class="tips" v-show="tipsShow" :style="tipsStyle"> 5 <span v-html="tipsContent"></span> 6 </div> 7 </d...
2024-01-10在node.js中解决承诺之前，then（）回调触发
使用node.js版本7.7.2，我要执行一个异步函数，然后在第一个函数完成后执行另一个函数，如下所示：function foo() { return new Promise(function(resolve, reject) { // Do some async stuff console.log('foo is about to resolve'); resolve(); });}function bar(arg) { console.log(arg);}foo().then(b...
2024-01-10
